<template>
    <ListLayout class="zcgl-ftgl-list-wrap">
        <ul class="type-wrap clearFloat" slot="top-left">
            <li v-for="(item, index) in typeList" :key="index" :class="{'active': queryFormData.type === item.code}" @click="handleSwitchQueryCondition('type', item.code)">{{item.label}}</li>
        </ul>

        <template slot="top-right">
            <span>项目：</span>
            <el-select placeholder="请选择项目" :value="queryFormData.projectId" @change="val => handleSwitchQueryCondition('projectId', val)">
                <el-option v-for="(item, index) in projectList" :key="index" :label="item.name" :value="item.id"/>
            </el-select>
        </template>

        <list-empty slot="table" text="您没有可管理的项目" v-if="projectList.length === 0 || page.list.length === 0"/>

        <template v-else="">
            <template slot="table-search">
                <div class="main-parent">
                    <div class="item-wrap">
                        <span class="label">楼栋</span>

                        <el-select placeholder="请选择楼栋" v-model="queryFormData.ldId" clearable @change="val => handleSwitchQueryCondition('ldId', val)">
                            <el-option v-for="(item, index) in ldList" :key="index" :label="item.label" :value="item.id"/>
                        </el-select>
                    </div>

                    <div class="item-wrap">
                        <span class="label">面积</span>

                        <el-select placeholder="请选择面积" v-model="queryFormData.mj" clearable @change="val => handleSwitchQueryCondition('mj', val)">
                            <el-option label="30m²以内" value="30"/>
                            <el-option label="30~70m²" value="30-70"/>
                            <el-option label="70~110m²" value="70-110"/>
                            <el-option label="110~150m²" value="110-150"/>
                            <el-option label="150m²以上" value="150"/>
                        </el-select>
                    </div>

                    <div class="item-wrap">
                        <span class="label">价格</span>

                        <el-select placeholder="请选择价格" v-model="queryFormData.jg" clearable @change="val => handleSwitchQueryCondition('jg', val)">
                            <el-option label="2000以内" value="2000"/>
                            <el-option label="2000~4000" value="2000-4000"/>
                            <el-option label="4000~8000" value="4000-8000"/>
                            <el-option label="8000~15000" value="8000-15000"/>
                            <el-option label="15000以上" value="15000"/>
                        </el-select>
                    </div>

                    <div class="item-wrap">
                        <span class="label">电话</span>

                        <el-input v-model="queryFormData.mobile" placeholder="请输入租客电话">
                            <el-button slot="append" icon="el-icon-search" @click="queryHandler"/>
                        </el-input>
                    </div>

                    <el-button style="margin-left: 25px;" plain type="primary" @click="gjSearchVisible = !gjSearchVisible">
                        <span>高级搜索</span>
                        <i class="el-icon-sort"/>
                    </el-button>
                </div>

                <el-collapse-transition>
                    <div class="gj-search-wrap" v-show="gjSearchVisible">
                        <div class="item-wrap">
                            <span class="label">单元</span>

                            <el-select placeholder="请选择单元" v-model="queryFormData.dyId" clearable @change="val => handleSwitchQueryCondition('dyId', val)">
                                <el-option v-for="(item, index) in dyList" :key="index" :label="item.label" :value="item.id"/>
                            </el-select>
                        </div>

                        <div class="item-wrap">
                            <span class="label">楼层</span>

                            <el-select placeholder="请选择楼层" v-model="queryFormData.lcId" clearable @change="val => handleSwitchQueryCondition('lcId', val)">
                                <el-option v-for="(item, index) in lcList" :key="index" :label="item.label" :value="item.id"/>
                            </el-select>
                        </div>

                        <div class="zylx-wrap clearFloat">
                            <span>类型</span>
                            <ul class="clearFloat" ref="zylxWrapRef">
                                <li :class="{'is-active': selectedZylx.length === 0}" @click="handleSwitchZylx('all')">
                                    <i class="el-icon-success"/>
                                    <span>不限</span>
                                </li>
                                <li v-for="(item, index) in zylxList" :key="index" :class="{'is-active': selectedZylx.includes(item.id) }" @click="handleSwitchZylx(item.id)">
                                    <i class="el-icon-success"/>
                                    <span>{{item.label}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-collapse-transition>
            </template>

            <div slot="table" :ref="tableRef">
                <div class="block" v-for="(item, index) in page.list" :key="index" :class="{'opened': openRowIds.includes(item.id)}">
                    <div class="title" @click="toggleItemStatus(item.id)">
                        <span>{{item.name}}（{{item.levelNum}}层 | {{item.roomNum}}间）</span>
                        <i class="el-icon-d-arrow-left"/>
                    </div>

                    <div class="content" :id="'room-' + item.id" v-if="openRowIds.includes(item.id)">
                        <empty v-if="!item.children || item.children.length === 0"/>

                        <div class="level-item" v-for="(level, levelIndex) in item.children" :key="levelIndex">
                            <span class="name">{{level.name}}</span>

                            <ul class="room-list clearFloat">
                                <empty v-if="!level.children || level.children.length === 0"/>

                                <li class="room-item" v-for="(room, roomIndex) in level.children" :key="roomIndex" :class="room.type">
                                    <div class="bq-wrap" :class="room.type" :bq-name="typeText[room.type]"/>

                                    <div class="img-parent">
                                        <img :src="room.url" alt="">
                                    </div>

                                    <div class="info">
                                        <div class="name">
                                            <ev-iconFont icon="icon-louyu"/>
                                            <span :class="{'dc': room.isDc === '1'}">{{room.name}}</span>
                                        </div>

                                        <div>
                                            <ev-iconFont icon="icon-pingfangmi"/>
                                            <span class="mj">{{room.mj}}m²</span>
                                        </div>

                                        <template v-if="['zzz', 'drz'].includes(room.type)">
                                            <div class="item">
                                                <ev-iconFont icon="icon-yonghu"/>
                                                <span class="value">{{room.zk}}</span>
<!--                                                <span v-if="room.htId" class="see-ht">查看合同</span>-->
                                            </div>

                                            <div class="item">
                                                <ev-iconFont icon="icon-riqi"/>
                                                <span class="value">{{room.zqStart}}~{{room.zqEnd}}</span>
                                            </div>

<!--                                            <div class="item yyq-day-wrap" v-if="room.isRzYq === '1'">-->
<!--                                                <span class="label"><span v-if="room.type === 'drz'">入驻</span>已逾期{{room.yyqDay}}天</span>-->
<!--                                            </div>-->
                                        </template>

                                        <template v-else-if="room.type === 'sd'">
                                            <div class="item clearFloat lb">
                                                <ev-iconFont icon="icon-33"/>
                                                <span class="value">{{room.sdr}}</span>
                                            </div>

                                            <div class="item clearFloat lb">
                                                <ev-iconFont icon="icon-yuanyin"/>
                                                <span class="value">{{room.sdyy}}</span>
                                            </div>

                                            <div class="item clearFloat lb">
                                                <ev-iconFont icon="icon-yuanyinshuoming"/>
                                                <span class="value">{{room.sdsm}}</span>
                                            </div>

                                            <div class="item clearFloat lb">
                                                <ev-iconFont icon="icon-riqi"/>
                                                <span class="value">{{room.sdsj}}</span>
                                            </div>
                                        </template>

                                        <template v-else-if="room.type === 'xzz'">
                                            <div class="item xz-day-wrap">
                                                <ev-iconFont icon="icon-xianzhi"/>
                                                <span class="label">已闲置{{room.xzDay}}天</span>
                                            </div>
                                        </template>

                                        <div>
                                            <ev-iconFont icon="icon-qian1"/>
                                            <span>{{room.price}}/{{room.priceType}}</span>
                                        </div>
                                    </div>

                                    <div class="button-parent">
                                        <template v-if="room.isYl !== '1' && room.type === 'zzz'">
                                            <el-button plain type="warning" @click="handleYl(room)">预离</el-button>
                                            <el-button plain type="success">续签</el-button>
                                        </template>
                                        <el-button plain type="success" v-if="room.type === 'xzz'" @click="handleYx(room)">意向</el-button>
                                        <el-button plain type="info" v-if="room.type === 'zzz'" class="tz-button" @click="handleTz(room)">退租</el-button>
                                        <el-button plain type="warning" v-if="room.type === 'sd'" class="js-button" @click="handleJs(room)">解锁</el-button>
                                        <el-button plain type="primary" v-if="room.type === 'drz'" class="rz-button">入驻</el-button>
                                        <el-button plain type="danger" v-if="room.type === 'xzz'" @click="handleLock(room)">锁定</el-button>
                                        <el-button plain type="success" v-if="room.type === 'xzz'" class="xq-button">新签</el-button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <yl ref="ylWindowRef"/>
        <lock ref="lockRoomRef"/>
    </ListLayout>
</template>

<script>
    export default JBoot({
        components: {
            yl: require('./yl').default,
            lock: require('./lock').default,
        },

        props: {},

        data() {
            return {
                moduleName: 'ftgl',
                typeList: [
                    { label: '全部', code: undefined },
                    { label: '闲置中', code: 'xzz' },
                    { label: '待入驻', code: 'dqz' },
                    { label: '在租中', code: 'zzz' },
                    { label: '不可租', code: 'bkz' },
                ],
                projectList: [],
                zylxList: [],
                gjSearchVisible: false,
                ldList: [],
                dyList: [],
                lcList: [],
                openRowIds: [],
                typeText: {
                    zzz: '在租中',
                    sd: '已锁定',
                    drz: '待入驻',
                    xzz: '闲置中'
                }
            }
        },

        computed: {
            selectedZylx (){
                return this.queryFormData.zylx || [];
            }
        },

        methods: {
            __listInit (){
                let maskId = this.$openMask(this.$el, '正在加载管理项目...');

                this.$api('project', 'queryManageProjectList').then(response => {
                    this.$closeMask(maskId);

                    let projectList = response.data || [];

                    if(!projectList || projectList.length === 0){
                        return;
                    }

                    this.$set(this, 'projectList', projectList);

                    let projectId = projectList[0].id;

                    this.handleSwitchQueryCondition('projectId', projectId);

                    this.querySearchCondition();
                }, error => {
                    this.$closeMask(maskId);

                    this.$error(error.message || '加载管理项目异常');
                });
            },

            querySearchCondition (projectId){
                this.$api('project', 'queryProjectZyType', { projectId }).then(response => {
                    this.$set(this, 'zylxList', response.data || []);
                });

                this.$api('project', 'queryProjectLd', { projectId }).then(response => {
                    this.$set(this, 'ldList', response.data || []);
                });

                this.$api('project', 'queryProjectDy', { projectId }).then(response => {
                    this.$set(this, 'dyList', response.data || []);
                });

                this.$api('project', 'queryProjectLc', { projectId }).then(response => {
                    this.$set(this, 'lcList', response.data || []);
                });
            },

            handleSwitchQueryCondition (field, value){
                this.$set(this.queryFormData, field, value);

                !!this.queryFormData.projectId && this.queryHandler();
            },

            handleSwitchZylx (lxId){
                // this.zylxTimerId && clearTimeout(this.zylxTimerId);

                let old = this.queryFormData.zylx || [];

                this.$set(this.queryFormData, 'zylx', lxId === 'all' ? [] : old.includes(lxId) ? old.filter(item => item !== lxId) : old.concat(lxId));

                // this.zylxTimerId = setTimeout(() => {
                    this.queryHandler();
                // }, 100);
            },

            getQueryParam (){
                return Object.assign({}, this.queryFormData, {
                    zylx: this.selectedZylx ? this.selectedZylx.join(',') : undefined
                });
            },

            initPageInfo (responseData){
                this.$set(this.page, 'list', responseData || []);

                let firstRowId = (this.page.list[0] || {}).id;

                firstRowId && this.$nextTick(function () {
                    this.handleOpenItem(firstRowId);
                });
            },

            toggleItemStatus (rowId){
                let index = this.openRowIds.indexOf(rowId);

                if(index > -1){
                    this.openRowIds.splice(index, 1);
                }else{
                    this.handleOpenItem(rowId)
                }
            },

            handleOpenItem (openRowId){
                if(!openRowId) return;

                this.openRowIds.push(openRowId);

                let item = this.page.list.find(item => item.id === openRowId);

                item && this.$nextTick(function () {
                    let maskId = this.$openMask(document.getElementById('room-' + openRowId), '正在加载楼层房间...');

                    this.$api(this.moduleName, 'queryLevelAndRoom', { projectId: this.queryFormData.projectId, ldId: openRowId }).then(response => {
                        maskId && this.$closeMask(maskId);

                        this.$set(item, 'children', response.data || []);
                    }, error => {
                        maskId && this.$closeMask(maskId);
                    });
                });
            },

            handleTz (room){
                this.$jump({name: 'tzbl', params: this.$routerParamsEncrypt({ id: room.id })});
            },

            handleYl (room){
                this.$getRef('ylWindowRef').show({id: room.id });
            },

            handleUnLock (room){
                this.$isOk('解锁房屋', '是否要解锁该房屋？').then(() => {
                    this.$api('ftgl', 'handleUnLock', { id: room.id }).then(response => {
                        this.$success('房屋解锁成功');

                        this.queryHandler();
                    });
                })
            },

            handleLock (room){
                this.$getRef('lockRoomRef').show({roomId: room.id});
            },

            handleYx (room){
                this.$jump({name: 'qyx', params: this.$routerParamsEncrypt({ id: room.id })});
            }
        },

        watch: {
            openRowIds (v, o){
                if(v.length > o.length){
                    let current = v.filter(item => !o.includes(item))[0];

                    current && this.$nextTick(function () {
                        this.handleOpenItem(current);
                    });
                }
            }
        }
    }).list().build();
</script>

<style lang="scss">
    .zcgl-ftgl-list-wrap {
        & .title-container{
            padding: 0 !important;
            & > .top-left{
                float: left;
                & > .type-wrap{
                    height: 35px;
                    line-height: 25px;
                    margin-left: -10px;
                    & li{
                        float: left;
                        margin: 0 10px;
                        cursor: pointer;
                        font-size: 14px;
                        height: 100%;
                        padding: 0 5px;
                        border-bottom: 2px transparent;
                        transition: color, border-bottom-color .3s;
                        user-select: none;
                        &.active{
                            border-bottom: 2px solid #2196F3;
                            color: #2196F3;
                        }
                    }
                }
            }
            & > .top-right{
                & > span{
                    vertical-align: middle;
                    font-size: 14px;
                }
            }
        }

        & .search-wrap{
            padding: 10px 0 15px !important;
            margin-top: -15px;
            & .item-wrap{
                display: inline-block;
                margin-left: 10px;
                margin-top: 15px;
                & > .label{
                    font-size: 14px;
                    margin-right: 5px;
                }
                & > .el-input{
                    width: 180px;
                    & i{
                        cursor: pointer;
                    }
                }
                &.input-selection{
                    & .el-input{
                        width: 50px;
                        & > input{
                            padding: 0 10px;
                        }
                    }
                }
            }
            & .main-parent{
                margin-left: -10px;
            }
            & .gj-search-wrap{
                margin-left: -10px;
                & .zylx-wrap{
                    margin-left: 10px;
                    margin-top: 15px;
                    font-size: 14px;
                    line-height: 30px;
                    & > span{
                        display: inline-block;
                        &:first-child{
                            float: left;
                            width: 40px;
                        }
                        &:last-child{
                            float: right;
                            width: 48px;
                            cursor: pointer;
                            user-select: none;
                            & > span{
                                display: inline-block;
                            }
                            & > i{
                                display: inline-block;
                                transform: rotate(0);
                                transition: transform .3s;
                                &.open{
                                    transform: rotate(180deg);
                                }
                            }
                        }
                    }
                    & > ul{
                        float: left;
                        vertical-align: bottom;
                        display: inline-block;
                        width: calc(100% - 40px);
                        margin: -10px 0 0 -10px;
                        overflow: hidden;
                        transition: height .3s;
                        height: auto;
                        & > li{
                            float: left;
                            position: relative;
                            margin: 10px 0 0 10px;
                            border: 1px solid #DEDEDE;
                            border-radius: 3px;
                            line-height: 26px;
                            padding: 0 10px;
                            color: #333333;
                            font-size: 12px;
                            cursor: pointer;
                            user-select: none;
                            &:first-child{
                                margin-right: 20px;
                            }
                            &.is-active{
                                color: #015DAA;
                                border-color: #015DAA;
                                & > i{
                                    display: inline-block;
                                }
                            }
                            &.is-disabled{
                                border-color: #DEDEDE;
                                color: #999999;
                                background-color: #F3F3F3;
                            }
                            & > i{
                                display: none;
                                position: absolute;
                                right: -5px;
                                top: -5px;
                                background-color: #ffffff;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
        & .table{
            & .block {
                position: relative;
                &:not(:last-child) {
                    margin-bottom: 25px;
                }

                & > .title {
                    background-color: #2196F3;
                    padding: 0 20px;
                    display: inline-block;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                    text-align: center;
                    color: #ffffff;
                    font-size: 14px;
                    line-height: 26px;
                    cursor: pointer;
                    user-select: none;
                    &:after{
                        content: '';
                        width: 100%;
                        height: 1px;
                        background-color: #2196F3;
                        position: absolute;
                        left: 0;
                        top: 26px;
                    }
                    & > span{

                    }
                    & > i{
                        transform: rotate(90deg);
                        transition: transform .3s;
                    }
                }

                &.opened{
                    & > .title > i{
                        transform: rotate(-90deg);
                    }
                    & > .content{
                    }
                }

                & > .content {
                    border: 1px solid #e4e4e4;
                    border-top: 1px solid #2196F3 !important;
                    border-radius: 5px;
                    padding: 15px;
                    background-color: #fbfcf9;
                    border-top-left-radius: 0 !important;
                    border-top-right-radius: 0 !important;
                    & > .level-item{
                        & > .name{
                            display: inline-block;
                            margin-bottom: 10px;
                        }
                        & > .room-list{
                            margin: -15px 0 0 -15px;
                            & > .room-item{
                                float: left;
                                background-color: #FFFFFF;
                                padding: 10px;
                                margin: 15px 0 0 15px;
                                border: 1px solid #efefef;
                                border-radius: 3px;
                                box-sizing: border-box;
                                height: 165px;
                                cursor: pointer;
                                position: relative;
                                transition: border .3s;
                                &:hover{
                                    border: 1px solid #9e9e9e;
                                    & > .img-parent > img{
                                        transform: scale(1.1);
                                    }
                                    & > .button-parent{
                                        animation: room-item-show .5s 1 forwards;
                                        box-shadow: 5px 5px 6px -2px #989898;

                                    }
                                }
                                & > .button-parent{
                                    width: 75px;
                                    position: absolute;
                                    top: 10px;
                                    right: -60px;
                                    opacity: 0;
                                    padding: 7px;
                                    box-sizing: border-box;
                                    text-align: center;
                                    background-color: #FFFFFF;
                                    border: 1px solid #eeeeee;
                                    border-top-right-radius: 8px;
                                    border-bottom-left-radius: 8px;
                                    & > .el-button{
                                        margin-left: 0!important;
                                        &+.el-button{
                                            margin-top: 5px;
                                        }
                                    }
                                }
                                & > .bq-wrap{
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    z-index: 2;
                                    width: 0;
                                    height: 0;
                                    font-size: 12px;
                                    color: #FFFFFF;
                                    border-top: 45px solid;
                                    border-left: 65px solid transparent;
                                    transform: rotateY(180deg);
                                    &:after{
                                        content: attr(bq-name);
                                        color: #ffffff;
                                        float: right;
                                        margin-top: -40px;
                                        width: 45px;
                                        transform: rotateY(180deg) rotate(-35deg) scale(.9);
                                    }
                                    &.zzz{/*在租中*/
                                        border-top-color: #00a523;
                                    }
                                    &.sd{/*已锁定*/
                                        border-top-color: #9e9e9e;
                                    }
                                    &.drz{/*待入驻*/
                                        border-top-color: coral;
                                    }
                                    &.xzz{/*闲置中*/
                                        border-top-color: #00bcd4;
                                    }
                                }
                                & > .img-parent{
                                    width: 160px;
                                    height: 100%;
                                    display: inline-block;
                                    overflow: hidden;
                                    & > img{
                                        transition: transform .3s;
                                        width: 100%;
                                        height: 100%;
                                        transform: scale(1);
                                    }
                                }
                                & > .info{
                                    width: 165px;
                                    display: inline-block;
                                    vertical-align: top;
                                    margin-left: 5px;
                                    font-size: 13px;
                                    & > div{
                                        &:not(.name){
                                            line-height: 16px;
                                            & > i{
                                                color: #757575;
                                                font-size: 14px;
                                                display: inline-block;
                                                width: 14px;
                                                vertical-align: top;
                                            }
                                            & > span{
                                                color: #009688;
                                                display: inline-block;
                                                width: calc(100% - 20px);
                                                white-space: nowrap;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            }
                                        }
                                    }
                                    & > .name{
                                        margin-bottom: 5px;
                                        color: #333333;
                                        & > span{
                                            font-weight: 600;
                                            font-size: 14px;
                                        }
                                    }
                                }
                                & > .see-ht-button{
                                    position: absolute;
                                    right: 10px;
                                    bottom: 10px;
                                    padding: 5px 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    @keyframes room-item-show {
        0% {
            right: -50px;
            opacity: 0;
        }
        50%{
            opacity: .5;
            z-index: 4;
        }
        100%{
            right: -10px;
            opacity: 1;
        }
    }
</style>
